// ESM 风格导入官方插件
import typography from '@tailwindcss/typography';

// 导出 Tailwind 的配置对象（ESM 默认导出）
export default {
    // 暗色模式通过 class 切换，便于与 dark 预设协作
    darkMode: 'class',
    // 指定需要扫描的文件模式，Tailwind 会根据这些文件里的类名生成最小化 CSS
    content: [
        // 扫描根目录的 index.html（若存在），确保类名被捕获
        "./index.html",
        // 扫描 src 下所有 JS/TS/JSX/TSX 文件，提取类名
        "./src/**/*.{js,ts,jsx,tsx}"
    ],

    // 预设样式在 TS 中以常量存在，加入 safelist 防止产物被摇掉
    safelist: [
        'bg-white', 'text-gray-900', 'border', 'border-gray-200', 'rounded-lg', 'shadow',
        'rounded-xl', 'shadow-2xl',
        'bg-white/70', 'backdrop-blur-md', 'border-white/40', 'shadow-lg',
        'bg-neutral-900', 'text-neutral-50', 'border-neutral-700', 'shadow-xl',
        'bg-neutral-100', 'text-neutral-800', 'rounded-2xl', 'ring-1', 'ring-black/10'
    ],

    // 主题自定义区（在默认主题基础上扩展）
    theme: {
        // 通过 extend 不覆盖默认主题，只做增量扩展
        extend: {
            // 自定义颜色集合（品牌色、灰阶、状态色）
            colors: {
                // 品牌主色集（多阶梯）
                primary: {
                    50: '#eff6ff',
                    100: '#dbeafe',
                    500: '#3b82f6',
                    600: '#2563eb',
                    700: '#1d4ed8',
                    900: '#1e3a8a',
                },
                // 灰阶色板（用于文字、边框、背景层次）
                gray: {
                    50: '#f9fafb',
                    100: '#f3f4f6',
                    200: '#e5e7eb',
                    300: '#d1d5db',
                    400: '#9ca3af',
                    500: '#6b7280',
                    600: '#4b5563',
                    700: '#374151',
                    800: '#1f2937',
                    900: '#111827',
                },
                // 危险态（如删除按钮/警示）
                danger: {
                    50: '#fef2f2',
                    100: '#fee2e2',
                    500: '#ef4444',
                    600: '#dc2626',
                    700: '#b91c1c',
                },
                // 成功态（如保存成功）
                success: {
                    50: '#f0fdf4',
                    100: '#dcfce7',
                    500: '#22c55e',
                    600: '#16a34a',
                    700: '#15803d',
                }
            },

            // 自定义间距（如 p-18、w-128 等）
            spacing: {
                '18': '4.5rem',
                '70': '17.5rem',  // 280px，用于侧边栏宽度
                '88': '22rem',
                '128': '32rem',
            },

            // 自定义更小的字体尺寸
            fontSize: {
                '2xs': '0.625rem',
            },

            // 自定义更大的圆角半径
            borderRadius: {
                '4xl': '2rem',
            },

            // 自定义阴影预设（卡片、模态、按钮等）
            boxShadow: {
                'card': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
                'card-hover': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
                'modal': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
                'button': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
            },

            // 自定义动画名到关键帧的映射
            animation: {
                'fade-in': 'fadeIn 0.2s ease-in-out',
                'slide-up': 'slideUp 0.3s ease-out',
                'scale-in': 'scaleIn 0.2s ease-out',
            },

            // 定义上述动画所用到的关键帧序列
            keyframes: {
                fadeIn: {
                    '0%': {opacity: '0'},
                    '100%': {opacity: '1'},
                },
                slideUp: {
                    '0%': {
                        opacity: '0',
                        transform: 'translateY(10px)'
                    },
                    '100%': {
                        opacity: '1',
                        transform: 'translateY(0)'
                    },
                },
                scaleIn: {
                    '0%': {
                        opacity: '0',
                        transform: 'scale(0.95)'
                    },
                    '100%': {
                        opacity: '1',
                        transform: 'scale(1)'
                    },
                },
            },
        },
    },

    // 插件数组（Tailwind 的功能扩展）
    plugins: [
        // 加载官方 Typography 插件，优化富文本排版样式
        typography,
    ],
}
